<template>
  <div class="user-page">
    <div class="top">
      <img
        class="bgc"
        src="http://124.223.73.204:8080/img/profile/bg.png"
        alt="背景图"
      />
      <div class="info">
        <div class="myIcon">
          <img class="iconIm" :src="url" alt="" ref="userImg" />
        </div>
        <div class="user">
          <div class="userna" ref="name">{{ user }}</div>
          <div class="edit">
            <van-button type="primary" to="/login" v-if="user === '游客'"
              >去登录</van-button
            >
            <div v-else>
              <span class="exit" @click="del">退出</span>
              <div class="editpe">
                <span>编辑个人资料</span>
                <i class="iconfont icon-sanjiaoright"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in iconList"
          :key="item.txt"
          :to="item.url"
          :icon="item.icon"
          :text="item.txt"
        />
      </van-grid>
    </div>
    <div class="file">
      <img src="http://124.223.73.204:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getinfo } from '@/api/user'
import { delToken, getToken } from '@/utils/storage'
import { Dialog } from 'vant'
export default {
  name: 'UserPage',
  data () {
    return {
      iconList: [
        { icon: 'star-o', txt: '我的收藏', url: '/collect' },
        { icon: 'wap-home-o', txt: '我的出租' },
        { icon: 'clock-o', txt: '看房记录' },
        { icon: 'idcard', txt: '成为房主' },
        { icon: 'contact', txt: '个人资料' },
        { icon: 'service-o', txt: '联系我们' }
      ],
      url: 'http://124.223.73.204:8080/img/profile/avatar.png',
      user: '游客'
    }
  },
  mounted () {
    this.$refs.userImg = this.url
    this.$refs.name = this.user
  },
  async created () {
    const data = await getinfo()
    // console.log(data.body.nickname)
    const token = getToken()
    if (token) {
      this.url = 'http://www.xiaoshuaipeng.com:8080' + data.body.avatar
      this.user = data.body.nickname
    }
  },
  methods: {
    del () {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出',
        confirmButtonColor: '#108ee9'
      }).then(() => {
        delToken()
        localStorage.removeItem('cityName')
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-page {
  background-color: #fff;
}
.active {
  border-radius: 30px;
  color: #fff;
  padding: 2px 15px;
  font-size: 12px;
}
.top {
  position: relative;
  min-height: 300px;
  .bgc {
    height: 191px;
  }
  .info {
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0px;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    padding-top: 0;
    text-align: center;
    font-size: 13px;
    .myIcon {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: solid 5px #f5f5f5;
      display: inline-block;
      box-shadow: 0px 2px 2px #bdbdbd;
      .iconIm {
        width: 100%;
        border-radius: 50%;
      }
    }
    .user {
      padding-top: 15px;
      .userna {
        margin-top: -30px;
        margin-bottom: 10px;
      }
      .edit {
        color: #999;
        font-size: 12px;
        // margin-top: 20px;
        .van-button--primary {
          width: 69px;
          height: 30px;
          padding: 0 10px;
          background-color: #21b97a;
          font-size: 13px;
          margin-top: 20px;
          border-radius: 5px;
        }
        .exit {
          border-radius: 30px;
          color: #fff;
          padding: 2px 15px;
          background: #21b97a;
          font-size: 12px;
          margin-top: 5px;
        }
        .editpe {
          color: #999;
          font-size: 12px;
          margin-top: 20px;
        }
        .icon-sanjiaoright {
          font-size: 12px;
        }
      }
    }
  }
}
.content {
  position: absolute;
  top: 45%;
  width: 100%;
  .van-hairline--top {
    height: 190px;
  }
}
.file {
  padding-top: 190px;
  text-align: center;
  margin-top: 10px;
  img {
    width: 92%;
  }
}
</style>
